<template>
  <div>
    <el-container>
      <el-header style="display: flex; justify-content: space-between; align-items: center; padding: 10px;">
        <span>
          &nbsp&nbsp
        <span class="title">新增任务</span>
        </span>
        <div>
          <el-button type="primary" icon="el-icon-folder-checked">保存</el-button>
          <el-button type="primary" icon="el-icon-upload2">提交</el-button>
          <el-button @click="back">返回</el-button>
        </div>
      </el-header>
      <el-main>
        <el-form :model="taskForm" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="任务名称" prop="taskName">
                <el-input v-model="taskForm.taskName" placeholder="请输入任务名称" required class="uniform-input"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务编号">
                <el-input disabled placeholder="任务编号根据后台设定的规定自动生成" class="uniform-input"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="充电站名称" prop="stationName">
                <el-input v-model="taskForm.stationName" placeholder="请选择充电站名称" readonly class="uniform-input">
                  <el-button slot="append" type="primary" @click="openStationDialog">选择</el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="充电站负责人" prop="chargerInCharge">
                <el-input v-model="taskForm.chargerInCharge" placeholder="请选择充电站负责人" readonly class="uniform-input">
                  <el-button slot="append" type="primary" @click="openChargePersonDialog">选择</el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="工作周期" prop="workCycle">
                <el-select v-model="taskForm.workCycle" placeholder="请选择工作周期" class="uniform-input">
                  <el-option label="选项1" value="option1"></el-option>
                  <el-option label="选项2" value="option2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务类型" prop="taskType">
                <el-select v-model="taskForm.taskType" placeholder="请选择任务类型" class="uniform-input">
                  <el-option label="选项1" value="option1"></el-option>
                  <el-option label="选项2" value="option2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="开始时间" prop="startTime">
                <el-date-picker v-model="taskForm.startTime" type="datetime" placeholder="请选择开始时间" class="uniform-input" style="width: 90%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间" prop="endTime">
                <el-date-picker v-model="taskForm.endTime" type="datetime" placeholder="请选择结束时间" class="uniform-input" style="width: 90%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="执行人员" prop="executor">
                <el-input v-model="taskForm.executor" placeholder="请选择执行人员" readonly class="uniform-input">
                  <el-button slot="append" type="primary" @click="openExecutorDialog">选择</el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务状态">
                <el-input disabled placeholder="根据执行情况自动填写状态信息" class="uniform-input"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="任务说明" prop="taskDescription">
            <el-input v-model="taskForm.taskDescription" type="textarea" placeholder="请输入任务说明"></el-input>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      taskForm: {
        taskName: '',
        taskNumber: '',
        stationName: '',
        chargerInCharge: '',
        workCycle: '',
        taskType: '',
        startTime: '',
        endTime: '',
        executor: '',
        taskDescription: ''
      },
      stationOptions: [
        { name: '知更鸟充电站1' },
        { name: '知更鸟充电站2' }
      ],
      chargePersonOptions: [
        { name: '张三' },
        { name: '李四' }
      ],
      executorOptions: [
        { name: '王五' },
        { name: '赵六' }
      ]
    };
  },
  methods: {
    openStationDialog() {
      const h = this.$createElement;
      const stationOptionsVNodes = this.stationOptions.map(option =>
        h(
          'div',
          {
            style: 'padding: 10px; cursor: pointer',
            on: {
              click: () => {
                this.taskForm.stationName = option.name;
                this.$msgbox.close();
              }
            }
          },
          option.name
        )
      );
      this.$msgbox({
        title: '选择充电站名称',
        message: h('div', null, stationOptionsVNodes),
        showCancelButton: true,
        confirmButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            done();
          } else {
            done();
          }
        }
      });
    },
    openChargePersonDialog() {
      const h = this.$createElement;
      const chargePersonOptionsVNodes = this.chargePersonOptions.map(option =>
        h(
          'div',
          {
            style: 'padding: 10px; cursor: pointer',
            on: {
              click: () => {
                this.taskForm.chargerInCharge = option.name;
                this.$msgbox.close();
              }
            }
          },
          option.name
        )
      );
      this.$msgbox({
        title: '选择充电站负责人',
        message: h('div', null, chargePersonOptionsVNodes),
        showCancelButton: true,
        confirmButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            done();
          } else {
            done();
          }
        }
      });
    },
    openExecutorDialog() {
      const h = this.$createElement;
      const executorOptionsVNodes = this.executorOptions.map(option =>
        h(
          'div',
          {
            style: 'padding: 10px; cursor: pointer',
            on: {
              click: () => {
                this.taskForm.executor = option.name;
                this.$msgbox.close();
              }
            }
          },
          option.name
        )
      );
      this.$msgbox({
        title: '选择执行人员',
        message: h('div', null, executorOptionsVNodes),
        showCancelButton: true,
        confirmButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            done();
          } else {
            done();
          }
        }
      });
    },
    back(){
      this.$router.push("/hostDisplay")
    },
  }
};
</script>

<style scoped>
.title {
  font-size: 20px;
  font-weight: bold;
}
.uniform-input {
  width: 90%;
  height: 36px;
  box-sizing: border-box; /* 确保 padding 和 border 不会增加元素的实际尺寸 */
}
div {
  background-color: rgb(255, 255, 255);
}
</style>    
